<template>
  <view class="news-card" :class="{ 'ad-card': news.isAd }">
    <!-- 显示封面图 -->
    <image :src="news.coverImg" class="news-img" mode="widthFix"></image>
    <view class="news-content">
      <!-- 置顶标签（仅普通新闻显示） -->
      <view class="top-tag" v-if="news.isTop && !news.isAd">置顶</view>
      <!-- 广告标签（仅广告显示） -->
      <view class="ad-tag" v-if="news.isAd">广告</view>
      <view class="news-title">{{ news.title }}</view>
      <view class="news-meta">
        <text class="author">{{ news.author }}</text>
        <text class="time">{{ news.time }}</text>
        <text class="comments" v-if="!news.isAd">{{ news.comments }}评</text>
      </view>
    </view>
  </view>
</template>

<style scoped>
/* 补充封面图和广告样式 */
.news-card {
  display: flex;
  padding: 20rpx;
  background-color: #fff;
  margin-bottom: 10rpx;
}
.news-img {
  width: 200rpx;
  height: 140rpx;
  border-radius: 10rpx;
  margin-right: 20rpx;
}
.ad-card .news-title {
  color: #ff6700; /* 广告标题用橙色区分 */
}
.ad-tag {
  display: inline-block;
  background-color: #ff6700;
  color: #fff;
  font-size: 20rpx;
  padding: 2rpx 8rpx;
  border-radius: 4rpx;
  margin-right: 10rpx;
}
</style>